<template>
    <div class="dianpushoucang">
        <div class="baobei2-content" v-if="pl">
            <div class="bc-top clearfix">
                    <ul class="baobei-nav clearfix">
                        <li class="qbbb activ2"><a>全部店铺<span>{{arr.length}}</span></a></li>
                    </ul>
                    <div class="baobei-r clearfix">
                        <div class="plgl">批量管理</div>
                    <form class="bbss">
                        <input type="text" class="bbss-text">
                        <button class="bbss-img"></button>
                    </form>
                    </div>
            </div>
            <div class="dp-content">
                <ul class="dp-content-nav">
                    <li class="dp-nav-li" v-for="(limit,qq) in arr" :key="qq">
                        <div class="nav-li-l clearfix">
                            <div class="li-l-top clearfix">
                                <div class="l-top-l">
                                    <a><img :src="'/img/'+limit.spimg"></a>
                                </div>
                                <div class="l-top-r">
                                    <div class="dpname clearfix">
                                        <a class="a1 clearfix">
                                            <img src="../assets/img/sc/dpbqlogo.png">
                                            <a href="javascript:;" @click="tiaodpu(limit)">{{limit.spname}}</a>
                                        </a>
                                        <a class="a2" href="javascript:;" @click="shanchudp(limit.spID,qq)"><img src="../assets/img/sc/dpljt.png"></a>
                                    </div>
                                    <div class="lxkh">
                                        <a class="clearfix">
                                            <a class="khmingzi">{{limit.spname}}</a>
                                            <div class="khtp"></div>
                                        </a>
                                    </div>
                                    <div class="beizhu">
                                        <a>
                                            <span><img src="../assets/img/sc/beizhu.png" class="xximg"></span>
                                            <span>添加备注</span>
                                        </a>
                                        <div class="beizhu2">
                                            <form class="beizhu2">
                                                <input type="text" class="beizhutext">
                                                <button type="button" class="bz-bnt">添加</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="li-l-bottom">
                                <a>相似店铺 ></a>
                            </div>
                        </div>
                        <div class="nav-li-r">
                            <div class="li-r-top clearfix">
                                <div class="r-top-l clearfix">
                                    <div class="bzsx bzsx1">
                                        本周上新<span>3</span>
                                    </div>
                                    <div class="bzsx"><img src="../assets/img/sc/fxhh.png"></div>
                                </div>
                                 <div class="r-top-r">
                                    <a>查看更多></a>
                                </div>
                                <ul class="li-r-bottom clearfix">
                                    <li class="r-bottom-li2" v-for="(limits,ww) in zongimg[qq]" :key="ww">
                                        <a class="li2-top">
                                            <img class=".r-bottom-img" :src="'/img/'+limits[0]">
                                        </a>
                                        <div class="li2-bottom">
                                            ￥<span>{{splist[qq][ww].money}}</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div v-else class="weicha">您还没收藏过店铺哦，快去逛逛吧!</div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            arr:"",
            img:"",
            imgwrap:[],
            pl:true,
            unames:"",
            splist:[],
            imgwrap:[],
            img:"",
            zongimg:[],
            jg:""
        }
    },
    methods:{
        tiaodpu(val){
           this.$router.push({name:"shangpu",params:{id:val.spID}})
        },
        shanchudp(val,key){
            var _this=this
            axios.post("/api/shanchudps",{spid:val}).then((data)=>{
                if(data.data){
                    _this.arr.splice(key,1)
                    if(_this.arr.length==0){
                        _this.pl=false
                    }
                }else{
                    _this.$toast({
                        message:"操作失败",
                        duration:1000
                    })
                }
            })
        }
    },
    created(){
        axios.get("/api/").then((data)=>{
            if(data.data){
               this.unames=data.data
            }else{
                this.unames=false
                this.$router.push("/login")
            }
        })
        var _this=this
        axios.post("/api/dpsc").then((data)=>{
            if(data.data){
                _this.arr=data.data
                for(var i=0;i<_this.arr.length;i++){
                    axios.post("/api/dplists",{id:_this.arr[i].spID}).then((data)=>{
                        if(data.data){
                            _this.splist.push(data.data)
                            for(var j=0;j<data.data.length;j++){
                                _this.img=data.data[j].img.split(',')
                                _this.imgwrap.push(_this.img)
                                _this.img=""
                            }
                             _this.zongimg.push(_this.imgwrap)
                             _this.imgwrap=[]
                        }else{
                            _this.splist.push("")
                        }
                    })
                }
                
                console.log(_this.splist)
            }else{
                _this.pl=false
            }
        })
    }
}
</script>


<style scoped>
/* /------------------------------------/  */
.weicha{
       width: 1190px;
       height: 250px;
       font-size: 16px;
       color: #B18466;
       text-align: center;
       line-height: 150px;
   }
.xximg{
    margin-bottom: 5px;
}
.activ3{
    display: block;
}
.beizhu2,.beizhutext{
    width:150px;
    height: 27px;
}
.beizhutext{
    border: #f40 1px solid;
    padding-left: 10px;
}
.beizhu2{
    /* display: none; */
    margin-top: 10px;
    position: relative;
}
.bz-bnt{
    border:none; 
    position: absolute;
    right: 0;
    top: 1px;
    width: 50px;
    height:25px;
    background: #f40;
    text-align: center;
    line-height: 25px;
    color: #fff;
}
/* /-----------------------------------/  */
.r-bottom-li2{
    margin-right:35px;
    width: 150px;
    height: 205px;
    float: left;
}
.li2-bottom{
    font-weight: bold;
    font-size: 13px;
    color: #f40;
    width: 150px;
    height: 25px;
    padding: 10px 20px 0;
    text-align: center;
}
.r-bottom-li2>a>img{
    cursor: pointer;
    width: 150px;
    height: 150px;
}
.li-r-bottom{
    float: left;
    width: 930px;
    height: 205px;
    margin-top: 5px;
}
.r-top-r>a{
    width: 100%;
    height: 100%;
    display: block;
    color: #666;
}
.r-top-r{
    cursor: pointer;
    margin-top: 20px;
    width: 100px;
    height: 18px;
    float: right;
}
.bzsx1{
    border-right: none;
    border: 1px solid #dcdcdc;
}
.bzsx{
    overflow: hidden;
    float: left;
    text-align: center;
    line-height: 28px;
    width:90px;
    height: 28px;
    background: #f3f3f3;
    color: #f40;
}
.bzsx>img{
    width: 90px;
    height:28px;
    margin-bottom: 10px;
}
.bzsx>span{
    margin-left: 5px;
}
.r-top-l{
    margin: 20px 0 10px 0;
    float: left;
    width: 700px;
    height: 28px;
}
.li-r-top{
    width: 890px;
    height: 64px;
}
.nav-li-r{
    float: left;
    width: 890px;
    height: 285px;
}
/* /--------------------------------/  */

.li-l-bottom{
    cursor: pointer;
    margin-left: 20px;
    width: 100px;
    height: 18px;
}
.li-l-bottom>a:hover,.r-top-r>a:hover{
    color: #f40;
}
.li-l-bottom>a{
    width:100px;
    height: 18px;
    color: #666;
}
.beizhu>a{
    cursor: pointer;
    color: #333;
    width:190px;
    height: 40px;
}
.beizhu>a>span{
    margin-left: -5px;
    margin-right: 5px;
}
.beizhu>a:hover{
    color: #f40;
}
.beizhu{
    margin-top:10px;
    width: 190px;
    height: 40px;
}
.lxkh>a{
    margin-top: 5px;
    width: 100%;
    height: 100%;
}
.lxkh>a>.khtp{
    float: left;
    background: url("../assets/img/sc/lxkf.png") no-repeat;
    width: 17px;
    height: 16px;
}
.lxkh>a:hover .khmingzi{
    color: #f40;
}
.lxkh>a>a{

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
    cursor: pointer;
    float: left;
    color: #333;
    text-overflow: ellipsis;
    width:72px;
}
.lxkh{
    margin-top:5x;
    width: 190px;
    height: 18px;
}
.dpname{
    margin-top: 20px;
    width:155px;
    height: 26px;
}
.a2>img{
    width:23px;
    height:23px;
}
.a2:hover{
    border-bottom: #f40 1px solid;
}
.a2{
    cursor: pointer;
    float: right;
    width: 24px;
    height: 24px;
}
.a1:hover a{
    color: #f40;
}
.a1>a{
    cursor: pointer;
    float: left;
    overflow: hidden;
    font-size: 14px;
    color: #333;
    width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dpname>.a1>img{
    margin-right:3px;
    float: left;
    width: 24px;
    height: 18px;
}
.dpname>.a1{
    float: left;
    display: block;
    width: 120px;
    height: 19px;
}
.l-top-r{
    width: 192px;
    height: 190px;
    float: left;
}
.l-top-l{
    float: left;
    text-align: center;
    width: 73px;
    height: 260px;
}
.l-top-l>a>img{
    width: 100%;
    height: 100%;
}
.l-top-l>a{
    cursor: pointer;
    margin: 20px 5px 10px 10px;
    display: block;
    width:50px;
    height: 50px;
}
.nav-li-l{
    width: 270px;
    height: 210px;
    float: left;
}
.dp-nav-li{
    width: 1230px;
    height: 286px;
}
.dp-content,.dp-content-nav{
    width: 1230px;
}
/* /------------------------------/  */
.clearfix::before{
    content: "";
    display: block;
    clear: both;
}
.bbss{
    margin:10px 0 10px 10px;
    position: relative;
    float: right;
    width: 150px;
    height: 29px;
}
.bbss-img{
    background: url('../assets/img/sc/fdj.png') no-repeat;
    position: absolute;
    right: 1px;
    border: transparent 1px solid;
    bottom:0px;
    width: 29px;
    height: 29px;
}

.bbss-text{
    padding-left: 10px;
    width: 150px;
    height: 30px;
    border:#dcdcdc 1px solid;
}
.baobei-nav{
    width: 390px;
    height: 48px;
    float: left;
}
.baobei-w{
    width:100%;
}
.baobei2-content{
    margin:10px auto;
    width: 1230px;
}
.bc-top{
    width: 100%;
    height: 48px;
    border-bottom: 2px solid #ddd;
}
.plgl:hover{
    color: #FF4400;
    border: #f40 1px solid;
}
.plgl{
    cursor: pointer;
    text-align: center;
    line-height: 29px;
    font-size: 14px;
    float: left;
    margin:10px;
    width: 70px;
    height: 30px;
    color: #666;
    border:#dcdcdc 1px solid;
}
.baobei-r{
    height: 48px;
    float: right;
}
.qbbb>a,.sx1>a{
    color: #333;
    font-size: 14px;
}
.qbbb:hover>a,.sx1:hover>a{
    color:#FF4400;
}
.sx1{
    cursor: pointer;
    float: left;
    line-height: 48px;
    text-align: center;
    width: 100px;
    height: 48px;
}
.activ2>a{
    color:#FF4400;
}
.activ2{
    
    border-bottom: #FF4400 2px solid;
}
.qbbb{
    cursor: pointer;
    float: left;
    line-height: 48px;
    text-align: center;
    width: 132px;
    height: 48px;
}
.dianpu-wz{
    background-color: #f40;
}
*{
	box-sizing: border-box;
}
body,ul,li,p,h1,h2,h3,em{
	margin: 0;
	padding: 0;
}
li{
	list-style: none;
	font-family: "微软雅黑";
	font-size: 12px;
	color: #666;
}
.w1230{
	width: 1230px;
}
h1,h2,h3{
	font-weight: normal;
}
</style>
